<template>
  <div class="contentBox setScrollbar">
    <div class="setFormMarBtm btnBox">
      <el-form
        class="yn_form"
        inline
        size="mini"
        label-width="auto"
      >
        <el-form-item
          label="问题名称"
          label-width="auto"
        >
          <el-input
            v-model="name"
            class="yn_ipt"
            placeholder="问题名称"
            :maxlength="20"
            clearable
          />
        </el-form-item>
        <el-form-item
          class="margin_btn"
          label="状态"
        >
          <el-select
            v-model="status"
            clearable
          >
            <el-option
              label="处理中"
              value="ACTIVE"
            />
            <el-option
              label="已完成"
              value="COMPLETED"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            class="yn_btn"
            type="primary"
            @click="queryList()"
          >
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            class="yn_btn"
            @click="reset()"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button
          type="primary"
          size="mini"
          :loading="downloadLoading"
          @click="handledownload"
        >
          导出
        </el-button>
        <el-button
          size="mini"
          type="primary"
          @click="addProcess('addForm')"
        >
          新增
        </el-button>
      </div>
    </div>
    <div class="content">
      <div class="leftTree">
        <el-tree
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        />
      </div>
      <div class="cntTab setScrollbar">
        <template>
          <el-table
            v-loading="loading"
            :data="tableData"
            stripe
            style="width: 100%"
          >
            <el-table-column type="index" label="序号" width="50" align="center" />
            <el-table-column
              prop="questionNumber.questionNumber.questionNumber"
              label="问题编号"
              width="175"
            />
            <el-table-column
              prop="process_name"
              label="问题名称"
              min-width="180"
            />
            <el-table-column
              prop="classification_name"
              label="所属分类"
              width="150"
            />
            <el-table-column
              prop="level"
              label="问题级别"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.quesLevel.quesLevel.quesLevel">{{ scope.row.quesLevel.quesLevel.quesLevel }}</span>
                <span v-else>{{ handLevel(scope.row.level) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="start_time"
              label="发起时间"
              width="160"
              :formatter="dateFormatter"
            />
            <el-table-column
              prop="end_time"
              label="完成时间"
              width="160"
              :formatter="dateFormatter"
            />
            <el-table-column
              prop="childs.childs.closing_date"
              label="截止日期"
              width="120"
            />
            <el-table-column
              prop="status"
              label="状态"
              width="100"
            >
              <template slot-scope="scope">
                <span>{{ handStatus(scope.row.status) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="150"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  class="MR18 bg5584FF"
                  type="primary"
                  @click="showProcess(scope.row)"
                >
                  查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 分页 -->
        <div class="pageBox">
          <el-pagination
            background
            :current-page.sync="pageNo"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="total"
            @current-change="getListData"
          />
        </div>
      </div>
    </div>
    <el-dialog
      title="选择问题"
      class="yn_dialog"
      :visible.sync="addFormVisible"
      width="80%"
    >
      <select-process @selectData="selectData" />
    </el-dialog>
  </div>
</template>
<script>
import selectProcess from '../add_process/selectProcess';
import formatDate from '@/utils/date';
export default {
  components: {
    selectProcess
  },
  data() {
    return {
      tableData: [],
      tableLoating: false,
      downloadLoading: false,
      pageSize: 10,
      pageNo: 1,
      showTemp: 'showList',
      procInstId: '',
      procDefId: '',
      processName: '',
      userId:JSON.parse(sessionStorage.getItem('user')).account,
      name:'',
      status:'',
      addFormVisible:false,
      searchForm: {},
      addMethod: null,
      catCode: 'process',
      total: 0,
      treeLoading: false,
      loading: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  mounted(){
    this.getListData()
    this.getTree()
  },
  methods:{
    handStatus(status){
      return status === 'ACTIVE' ? '处理中' : status === 'EXTERNALLY_TERMINATED' ? '已超期' : '已完成'
    },
    handLevel(level){
      return level === '0' ? '初级' : level === '1' ? '中级' : '高级'
    },
    reset(){
      this.status = ''
      this.name = ''
      this.pageSize = 10
      this.pageNo = 1
      this.getListData()
    },
    addProcess(val){
      this.addMethod = val;
      this.addFormVisible = true
    },
    selectData(data){
      if(this.addMethod === 'addForm'){
        this.$router.push({
          name: 'add_process',
          params: { data: data }
        });
      }else{
        this.$router.push({
          name: 'add_excelProcess',
          params: { data: data }
        });
      }

    },
    dateFormatter(a, b, c) {
      if (!c) return '--';
      return formatDate(new Date(c), 'yyyy-MM-dd hh:mm:ss');
    },
    queryList(){
      this.pageSize = 10
      this.pageNo = 1
      this.getListData()
    },
    getListData(){
      this.tableLoating = true
      const queryParams = {
        'ACT_HI_PROCINST:data[]': {
          '@column': 'ID_:procInstId,START_TIME_:start_time,END_TIME_:end_time,STATE_:status,PROC_DEF_ID_:procDefID',
          '@where': {
            'START_USER_ID_@eq': this.userId
          },
          '@order':'START_TIME_-',
          '@page': {
            '@pageSize': 10,
            '@pageNo': this.pageNo
          },
          '@join': [
            {
              'ACT_RE_PROCDEF@leftOutJoin': {
                '@column': 'NAME_:process_name,KEY_:procDefKey',
                '@on': {
                  'ID_': 'data/PROC_DEF_ID_'
                }
              }
            },
            {
              'c_process@leftOutJoin': {
                '@column': 'name:process_name,cat_code,level',
                '@on': {
                  'bpmn_key': 'ACT_RE_PROCDEF/KEY_'
                },
                '@where': {
                  'name@like': `%${this.name}%`,
                  'cat_code@like':`${this.catCode}%`
                }
              }
            },
            {
              'sys_classification@leftOutJoin': {
                '@column': 'classification_name',
                '@on': {
                  'cate_code': 'c_process/cat_code'
                }
              }
            }
          ],
          '@child':[
            {
              'act_hi_varinst:childs{}': {
                '@column': 'TEXT_:closing_date',
                '@where': {
                  'proc_inst_id_@eq': '${procInstId}',
                  'name_@eq': 'closing_date'
                }
              }
            },
            {
              'act_hi_varinst:questionNumber{}': {
                '@column': 'TEXT_:questionNumber',
                '@where': {
                  'proc_inst_id_@eq': '${procInstId}',
                  'name_@eq': 'questionNumber'
                }
              }
            },
            {
              'act_hi_varinst:quesLevel{}': {
                '@column': 'TEXT_:quesLevel',
                '@where': {
                  'proc_inst_id_@eq': '${procInstId}',
                  'name_@eq': 'ques_level'
                }
              }
            }
          ]
        }
      }
      if (this.status) {
        queryParams['ACT_HI_PROCINST:data[]']['@where']['STATE_@eq'] = this.status
      }
      this.COM.jsonsqlForSelect(queryParams).then(res=>{
        this.tableLoating = false
        this.tableData = res.data
        this.total = parseInt(res.total)
      })
    },
    showProcess(row){
      this.procInstId = row.procInstId
      this.procDefId = row.procDefID
      this.processName = row.process_name
      this.showTemp = 'showDetail'
      this.$router.push({
        name: 'approve_process',
        params: { data: row,type:'check_process' }
      });
    },
    handledownload() {
      this.downloadLoading = true;
      const queryParams = {
        'ACT_HI_PROCINST:data[]': {
          '@column': 'ID_:procInstId,START_TIME_:start_time,END_TIME_:end_time,STATE_:status,PROC_DEF_ID_:procDefID',
          '@where': {
            'START_USER_ID_@eq': this.userId
          },
          '@order':'START_TIME_-',
          '@join': [
            {
              'ACT_RE_PROCDEF@leftOutJoin': {
                '@column': 'NAME_:process_name,KEY_:procDefKey',
                '@on': {
                  'ID_': 'data/PROC_DEF_ID_'
                }
              }
            },
            {
              'c_process@leftOutJoin': {
                '@column': 'name:process_name,cat_code,level',
                '@on': {
                  'bpmn_key': 'ACT_RE_PROCDEF/KEY_'
                },
                '@where':{
                  'cat_code@like':`${this.catCode}%`
                }
              }
            },
            {
              'sys_classification@leftOutJoin': {
                '@column': 'classification_name',
                '@on': {
                  'cate_code': 'c_process/cat_code'
                }
              }
            }
          ],
          '@child':[
            {
              'act_hi_varinst:childs{}': {
                '@column': 'TEXT_:closing_date',
                '@where': {
                  'proc_inst_id_@eq': '${procInstId}',
                  'name_@eq': 'closing_date'
                }
              }
            },
            {
              'act_hi_varinst:questionNumber{}': {
                '@column': 'TEXT_:questionNumber',
                '@where': {
                  'proc_inst_id_@eq': '${procInstId}',
                  'name_@eq': 'questionNumber'
                }
              }
            },
            {
              'act_hi_varinst:quesLevel{}': {
                '@column': 'TEXT_:quesLevel',
                '@where': {
                  'proc_inst_id_@eq': '${procInstId}',
                  'name_@eq': 'ques_level'
                }
              }
            }
          ]
        }
      }
      this.COM.jsonsqlForSelect(queryParams).then(res=>{
        res.data.forEach(item =>{
          item.status = this.handStatus(item.status)
          item.level = item.quesLevel.quesLevel.quesLevel ? item.quesLevel.quesLevel.quesLevel : this.handLevel(item.level)
          item.closing_date = item.childs.childs.closing_date
          item.questionNumber = item.questionNumber.questionNumber.questionNumber
          item.start_time = formatDate(new Date(item.start_time), 'yyyy-MM-dd hh:mm')
          item.end_time = formatDate(new Date(item.end_time), 'yyyy-MM-dd hh:mm')
        })
        const list = res.data
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = [
            '问题编号',
            '问题名称',
            '所属分类',
            '问题级别',
            '发起时间',
            '完成时间',
            '截止日期',
            '状态'
          ];
          const filterVal = [
            'questionNumber',
            'process_name',
            'classification_name',
            'level',
            'start_time',
            'end_time',
            'closing_date',
            'status'
          ];
          const data = this.COM.formatJson(filterVal, list)
          console.log('data;', data)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: '我的申请',
            autoWidth: this.autoWidth,
            bookType: this.bookType
          });
          this.downloadLoading = false;
        }).catch(e => {
          console.log('error:', e)
          this.downloadLoading = false;
        })
      }).catch(e => {
        console.log('error:', e)
        this.downloadLoading = false;
      })
    },
    getTree() {
      this.COM.jsonsqlForSelect({
        'sys_classification:data[]': {
          '@column':
            'classification_id:id,pid:parentId,classification_name:label,cate_code:value',
          '@where': {
            'cate_code@like': '%process%'
          }
        }
      })
        .then(res => {
          this.treeData = this.COM.getTreeData(res.data, 1);
        })
        .catch(e => {
          console.log('error:', e)
        });
    },
    handleNodeClick(data) {
      // 树节点点击方法
      this.pageNo = 1;
      this.catCode = data.value;
      this.getListData()
    }
  }
};
</script>
<style lang="less" scoped>
.brdDashed {
  border: 1px dashed #888;
}
.brdCon {
  padding: 3px 7px;
  border-radius: 12px;
  font-size: 12px;
  color: #5875a4;
  background: #e4edf4;
}
.word_yu {
  margin-left: 5px;
  margin-right: 5px;
}
.brdConPass {
  padding: 3px 7px;
  border-radius: 2px;
  font-size: 12px;
  color: #5875a4;
  background: #e4edf4;
}
.brdConRed {
  padding: 3px 7px;
  border-radius: 2px;
  font-size: 12px;
  color: #c4616b;
  background: #f5e7e5;
}
/deep/.el-icon-circle-close {
  margin-right: 20px !important;
}
.setFormMarBtm {
  display: flex;
  justify-content: space-between;
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
